"use client"

import { useState, useEffect } from 'react'
import { textStyles, fontSizes, fontWeights } from '../../lib/fontConfig'
// import { StrokeAnimationSVG } from '../StrokeAnimationSVG'
// import { WritingCanvas } from '../WritingCanvas'

interface Course {
  lesson_number: string
  course_name: string
  target_char: string
}

interface WritingTrainingDisplayProps {
  currentCourse?: Course
  selectedContent: string
}

interface CharacterWritingInfo {
  character: string
  pronunciation: string
  pinyin: string
  strokeCount: number
  strokeOrder: string[]
  writingRequirements: string[]
  keyPoints: string[]
  commonMistakes: string[]
  svgPath: string
}

export function WritingTrainingDisplay({ currentCourse, selectedContent }: WritingTrainingDisplayProps) {
  const [writingInfo, setWritingInfo] = useState<CharacterWritingInfo | null>(null)
  const [isAnimating, setIsAnimating] = useState(false)
  const [currentStroke, setCurrentStroke] = useState(0)

  // 获取汉字书写信息
  const getWritingInfo = (char: string): CharacterWritingInfo => {
    const writingDatabase: { [key: string]: CharacterWritingInfo } = {
      '木': {
        character: '木',
        pronunciation: 'mù',
        pinyin: 'mù',
        strokeCount: 4,
        strokeOrder: ['横', '竖', '撇', '捺'],
        writingRequirements: [
          '横画要平直，略向右上倾斜',
          '竖画要垂直，穿过横画中心',
          '撇画从上向左下倾斜，要有弧度',
          '捺画从中心向右下延伸，末端要有顿笔'
        ],
        keyPoints: [
          '整体结构要平衡对称',
          '撇捺要张开，形成稳定的底座',
          '竖画是主笔，要写得挺拔',
          '四个笔画长短要协调'
        ],
        commonMistakes: [
          '横画写得太平，缺少倾斜度',
          '竖画偏离中心位置',
          '撇捺角度不够张开',
          '整体结构不够平衡'
        ],
        svgPath: 'M50,80 L150,80 M100,60 L100,140 M80,100 L60,130 M120,100 L160,130'
      },
      '水': {
        character: '水',
        pronunciation: 'shuǐ',
        pinyin: 'shuǐ',
        strokeCount: 4,
        strokeOrder: ['竖钩', '横撇', '撇', '捺'],
        writingRequirements: [
          '竖钩要直，钩要小而有力',
          '横撇转折要自然流畅',
          '左撇要短，右捺要长',
          '整体要有流动感'
        ],
        keyPoints: [
          '中间竖钩是主笔',
          '左右两笔要对称',
          '下部撇捺要张开',
          '体现水的流动特征'
        ],
        commonMistakes: [
          '竖钩写得太弯曲',
          '横撇转折生硬',
          '撇捺不够对称',
          '整体缺少动感'
        ],
        svgPath: 'M100,60 L100,120 Q105,125 110,120 M80,90 Q90,85 100,90 M70,110 L50,140 M130,110 L170,140'
      }
    }
    
    return writingDatabase[char] || writingDatabase['木']
  }

  useEffect(() => {
    const char = currentCourse?.target_char || '木'
    setWritingInfo(getWritingInfo(char))
  }, [currentCourse])

  // 开始笔画动画
  const startAnimation = () => {
    setIsAnimating(true)
    setCurrentStroke(0)
  }

  // 停止动画
  const stopAnimation = () => {
    setIsAnimating(false)
    setCurrentStroke(0)
  }

  if (!writingInfo) return null

  // 根据选中的内容显示不同的标题
  const getContentTitle = () => {
    const contentTitles: { [key: string]: string } = {
      '木': '字根"木"的书写训练',
      '一': '笔画"横"的书写要点',
      '丨': '笔画"竖"的书写要点',
      '丿': '笔画"撇"的书写要点',
      '丶': '笔画"捺"的书写要点',
      '氵': '部首"三点水"的书写要点',
      '水': '字根"水"的书写训练',
      '亅': '笔画"竖钩"的书写要点'
    }
    return contentTitles[selectedContent] || `"${writingInfo.character}" 字书写训练`
  }

  return (
    <div className="h-full flex flex-col p-3">
      {/* 标题区域 - 儿童友好优化 */}
      <div className="text-center mb-4">
        <h2 className={`${textStyles.mainTitle} text-purple-700 mb-3 drop-shadow-sm`}>
          🎯 {getContentTitle()}
        </h2>
        <div className="flex justify-center items-center space-x-6">
          <div className="bg-blue-100 px-4 py-2 rounded-full border-2 border-blue-300">
            <span className={`${textStyles.description} text-blue-700 font-semibold`}>
              🔊 读音：{writingInfo.pronunciation}
            </span>
          </div>
          <div className="bg-green-100 px-4 py-2 rounded-full border-2 border-green-300">
            <span className={`${textStyles.description} text-green-700 font-semibold`}>
              ✏️ 笔画：{writingInfo.strokeCount}画
            </span>
          </div>
          <div className="bg-purple-100 px-4 py-2 rounded-full border-2 border-purple-300">
            <span className={`${textStyles.description} text-purple-700 font-semibold`}>
              👆 当前：{selectedContent}
            </span>
          </div>
        </div>
      </div>

      {/* 主要内容区域 */}
      <div className="flex-1 grid grid-cols-2 gap-4 min-h-0">
        {/* 左侧：参考字和动画 */}
        <div className="flex flex-col space-y-3">
          {/* 参考字展示 */}
          <div className="bg-white/90 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-blue-100">
            <h3 className={`${textStyles.sectionTitle} text-blue-700 mb-3 text-center font-bold drop-shadow-sm`}>
              📝 看看这个字
            </h3>
            
                         {/* SVG动画区域 */}
             <div className="bg-gray-50 rounded-xl p-4 mb-3 h-64 flex items-center justify-center">
               <div className="text-center">
                 <div className={`${textStyles.primaryCharacter} text-gray-800 mb-4`}>
                   {writingInfo.character}
                 </div>
                 <div className={`${textStyles.description} text-gray-600 mb-4 font-medium`}>
                   {isAnimating ? `正在学第 ${currentStroke + 1} 笔` : '点击"看动画"按钮学习写字'}
                 </div>
                 <div className="w-32 bg-gray-200 rounded-full h-2 mx-auto">
                   <div 
                     className="bg-blue-500 h-2 rounded-full transition-all duration-300"
                     style={{ width: `${isAnimating ? (currentStroke / writingInfo.strokeOrder.length) * 100 : 0}%` }}
                   />
                 </div>
                 <div className={`${textStyles.caption} text-blue-600 bg-blue-50 px-3 py-1 rounded-full mt-3 font-medium`}>
                   💡 动画功能正在准备中
                 </div>
               </div>
             </div>

            {/* 动画控制按钮 */}
            <div className="flex justify-center space-x-2">
              <button
                onClick={startAnimation}
                disabled={isAnimating}
                className={`
                  ${textStyles.secondaryButton} px-4 py-2 rounded-lg transition-all duration-300
                  ${isAnimating 
                    ? 'bg-gray-300 text-gray-500 cursor-not-allowed' 
                    : 'bg-blue-500 text-white hover:bg-blue-600 hover:scale-105'
                  }
                `}
              >
                {isAnimating ? '正在播放...' : '▶️ 看动画'}
              </button>
              
              <button
                onClick={stopAnimation}
                className={`${textStyles.secondaryButton} px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 hover:scale-105 transition-all duration-300`}
              >
                ⏹️ 暂停
              </button>
            </div>
          </div>

          {/* 笔画顺序或选中内容详情 */}
          <div className="bg-white/90 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-green-100">
            <h3 className={`${textStyles.sectionTitle} text-green-700 mb-3 font-bold drop-shadow-sm`}>
              {selectedContent === writingInfo.character ? '✏️ 怎么写呢？' : '🎯 重点学习'}
            </h3>
            
            {selectedContent === writingInfo.character ? (
              // 显示完整笔画顺序
              <div className="grid grid-cols-2 gap-2">
                {writingInfo.strokeOrder.map((stroke, index) => (
                  <div
                    key={index}
                    className={`
                      p-2 rounded-lg text-center transition-all duration-300
                      ${currentStroke === index && isAnimating
                        ? 'bg-blue-100 border-2 border-blue-400 scale-105'
                        : 'bg-gray-50 border border-gray-200'
                      }
                    `}
                  >
                    <div className={`${textStyles.caption} text-blue-600 font-semibold`}>第{index + 1}笔</div>
                    <div className={`${textStyles.tag} text-gray-800 font-bold`}>{stroke}</div>
                  </div>
                ))}
              </div>
            ) : (
              // 显示选中内容的详细信息
              <div className="space-y-3">
                <div className="text-center">
                  <div className={`${textStyles.primaryCharacter} text-blue-600 mb-2`}>
                    {selectedContent}
                  </div>
                  <div className={`${textStyles.description} text-gray-700`}>
                    {selectedContent === '一' && '横画要平直，略向右上倾斜'}
                    {selectedContent === '丨' && '竖画要垂直，穿过横画中心'}
                    {selectedContent === '丿' && '撇画从上向左下倾斜，要有弧度'}
                    {selectedContent === '丶' && '捺画从中心向右下延伸，末端要有顿笔'}
                    {selectedContent === '氵' && '三点水旁，三点要有变化，不能写成三个相同的点'}
                    {selectedContent === '亅' && '竖钩要直，钩要小而有力'}
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* 右侧：练习区域和要求 */}
        <div className="flex flex-col space-y-3">
          {/* 写字画板 */}
          <div className="bg-white/90 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-purple-100 flex-1">
            <h3 className={`${textStyles.sectionTitle} text-purple-700 mb-3 text-center font-bold drop-shadow-sm`}>
              ✍️ 我来试试写
            </h3>
                         <div className="bg-gray-50 rounded-xl p-4 h-64 flex items-center justify-center border-2 border-dashed border-gray-300">
               <div className="text-center">
                 <div className={`${textStyles.primaryCharacter} text-gray-300 mb-4`}>
                   {writingInfo.character}
                 </div>
                 <div className={`${textStyles.description} text-gray-600 mb-4 font-medium`}>
                   在这里练习写字吧！
                 </div>
                 <div className="flex justify-center space-x-2">
                   <button className={`${textStyles.secondaryButton} px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 hover:scale-105 transition-all duration-300`}>
                     🗑️ 重新写
                   </button>
                   <button className={`${textStyles.secondaryButton} px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 hover:scale-105 transition-all duration-300`}>
                     💾 保存作品
                   </button>
                 </div>
                 <div className={`${textStyles.caption} text-blue-600 bg-blue-50 px-3 py-1 rounded-full mt-3 font-medium`}>
                   💡 写字功能正在准备中
                 </div>
               </div>
             </div>
          </div>

          {/* 书写要求 */}
          <div className="bg-white/90 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-orange-100">
            <h3 className={`${textStyles.sectionTitle} text-orange-700 mb-3 font-bold drop-shadow-sm`}>
              📋 写字小贴士
            </h3>
            <div className="space-y-2 max-h-32 overflow-y-auto">
              {writingInfo.writingRequirements.map((requirement, index) => (
                <div key={index} className="flex items-start space-x-2">
                  <span className="text-orange-500 mt-1">•</span>
                  <span className={`${textStyles.caption} text-gray-700`}>
                    {requirement}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* 底部：要点和常见错误 */}
      <div className="grid grid-cols-2 gap-4 mt-4">
        {/* 书写要点 */}
        <div className="bg-white/90 backdrop-blur-sm rounded-xl p-3 shadow-lg border border-green-100">
          <h4 className={`${textStyles.tag} text-green-800 mb-2 flex items-center font-bold`}>
            <span className="mr-2">💡</span>
            记住这些哦
          </h4>
          <div className="space-y-1">
            {writingInfo.keyPoints.map((point, index) => (
              <div key={index} className="flex items-start space-x-2">
                <span className="text-green-500 text-xs mt-1">✓</span>
                <span className={`${textStyles.caption} text-gray-700`}>
                  {point}
                </span>
              </div>
            ))}
          </div>
        </div>

        {/* 常见错误 */}
        <div className="bg-white/90 backdrop-blur-sm rounded-xl p-3 shadow-lg border border-red-100">
          <h4 className={`${textStyles.tag} text-red-800 mb-2 flex items-center font-bold`}>
            <span className="mr-2">⚠️</span>
            别这样写哦
          </h4>
          <div className="space-y-1">
            {writingInfo.commonMistakes.map((mistake, index) => (
              <div key={index} className="flex items-start space-x-2">
                <span className="text-red-500 text-xs mt-1">✗</span>
                <span className={`${textStyles.caption} text-gray-700`}>
                  {mistake}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
} 